<template>
  <div>
    <div class="carousel">
      <!-- 轮播图 -->
      <h2 class="title">东营中学德育管理系统</h2>
      <el-carousel indicator-position="outside" arrow="always" class="carousel" :interval="3000" height="460px"
        width="90%">
        <el-carousel-item v-for="(item, index) in items" :key="index">
          <img :src="item.imgUrl" alt="背景图" style="width: 100%;height:100%;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 日期 -->
    <div class="date-picker">
      <el-calendar>
        <template slot="dateCell" slot-scope="{date, data}">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
          </p>
        </template>
      </el-calendar>
    </div>

    <el-card :body-style="{ padding: '0px' }" style="height: 600px;overflow-y: scroll; background-color: #ffffff">
          <div style="background: #5a5e66; height: 170px; margin: 5px">
            <el-carousel height="170px">
              <el-carousel-item v-for="item in images" :key="item.id">
                <el-image :src="item.url" :preview-src-list="[item.url]" style="width: 100%; height: 170px"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 通知 -->
          <div class="cardHeader" style="margin-top: 5px; width: 100%;">
            <div style="display: inline-block; margin-top: 5px"><i class="el-icon-message-solid"
                                                                   style="color: #2f79ff"></i> <span>通知</span></div>
            <div style="display: inline-block; height: 25px; float: right">
              <el-button type="text" class="noticeMore" style="height: 25px; width: 100px; line-height: 25px"
                         @click.native.prevent="handleMore">
                查看更多
                <i class="el-icon-d-arrow-right el-icon--right" style="margin-left: -2px"></i>
              </el-button>
            </div>
          </div>
          <el-divider></el-divider>
          <ol class="noticeUl">
            <li v-for="item in messageList" :key="item.id" style="border-bottom: 1px solid #dcdfe6">
              <a class="notice" @click.prevent="viewDetailButton(item.id)">
                {{ item.title }}
              </a>
              <span style="float: right; margin-right: 10px;">
                {{ item.createTime }}
              </span>
            </li>
          </ol>
    </el-card>


    <!-- 通知公告详情内容对话框 -->
    <div>
      <el-dialog title="通知公告" :visible.sync="viewDetail" width="960px" append-to-body>
        <el-card>
          <div style="text-align: center">
            <h1 style="display: inline-block">{{ form.title }}</h1>
          </div>
          <span class="info-container" :disabled="true" v-html="form.content"></span>
          <br/><br/>
          <div style="float: right;">
            <el-descriptions :column="3">
              <el-descriptions-item label="接收人">{{ form.receivePacket }}</el-descriptions-item>
              <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="viewDetail = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 统计表格 -->
    <!-- <div class="dy-table">
      <el-table :data="tableData" :border="true" style="width: 100%">
        <el-table-column prop="date" align="center" label="活动时间" width="180">
        </el-table-column>
        <el-table-column prop="content" align="center" label="活动内容" width="180">
        </el-table-column>
        <el-table-column prop="joinobj" label="参与对象" align="center" width="180">
        </el-table-column>
        <el-table-column prop="person" label="责任人" align="center" width="180">
        </el-table-column>
        <el-table-column prop="address" label="活动地址" align="center" width="180">
        </el-table-column>
        <el-table-column prop="return" label="德育效果" align="center"
          :filter-method="filterTag">
          <template slot-scope="scope">
            <el-tag :type="scope.row.return === '效果不佳' ? 'warning' : 'success'" disable-transitions>{{ scope.row.return }}</el-tag>
          </template>
          width="180">
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注">
        </el-table-column>
      </el-table>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'index',
  components: {},
  data() {
    return {
      items: [
        {
          imgUrl: require('../assets/images/bg1.png')
        },
        {
          imgUrl: require('../assets/images/bg2.jpg')
        },
        {
          imgUrl: require('../assets/images/bg3.png')
        }
      ],
      tableData: [
        {
          date: '2023-03-18',
          content: '观看《我和我的祖国》电影',
          joinobj: '初一三班',
          person: '王小酥',
          address: '逸夫楼多媒体教室',
          return: '效果不佳',
          remark: '培养学生的爱国主义'
        },
        {
          date: '2023-03-18',
          content: '邀请消防队来进行防火主题教育',
          joinobj: '初二四班',
          person: '王小酥',
          address: '逸夫楼多媒体教室',
          return: '效果不佳',
          remark: '培养学生的爱国主义'
        },
        {
          date: '2023-03-18',
          content: '对学生进行法律主题教育',
          joinobj: '初三五班',
          person: '王小酥',
          address: '逸夫楼多媒体教室',
          return: '效果一般',
          remark: '培养学生的爱国主义'
        },
        {
          date: '2023-03-18',
          content: '进行英文主题演讲',
          joinobj: '初二六班',
          person: '王小酥',
          address: '逸夫楼多媒体教室',
          return: '效果不佳',
          remark: '培养学生的爱国主义'
        },
        {
          date: '2023-03-18',
          content: '观看《助人为乐》系列纪录片',
          joinobj: '初一七班',
          person: '王小酥',
          return: '效果显著',
          address: '逸夫楼多媒体教室',
          remark: '培养学生的爱国主义'
        },
        {
          date: '2023-03-18',
          content: '进行《爱护环境》主题演讲',
          joinobj: '初二八班',
          person: '王小酥',
          address: '逸夫楼多媒体教室',
          return: '效果一般',
          remark: '培养学生的爱国主义'
        },
      ],
      messageList: [
        {
          id:1,title:'关于2023上半年学生德育培养计划方案通知',createTime:'2013-03-26'
        },
        {
          id:2,title:'关于组织开展爱国主义教育通知',createTime:'2013-03-23'
        },
        {
          id:3,title:'关于组织学生参加思想品德建设通知',createTime:'2013-03-21'
        },
        {
          id:4,title:'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',createTime:'2013-03-26'
        },
      ],

      images: [
        {url: require('../assets/images/bg1.png'), id: 1},
        {url: require('../assets/images/bg2.jpg'), id: 2},
        {url: require('../assets/images/bg3.png'), id: 3},
        {url: require('../assets/images/bg1.png'), id: 4}
      ],

      viewDetail:false,

      form:{
        title:111,
        content:222,
        createBy:333,
        createTime:444,
        receivePacket:555
      }
    }
  },
  methods:{
    filterTag(value, row) {
        return row.tag === value;
      },

    viewDetailButton(id) {
      this.viewDetail = true
    }
  }
}
</script>

<style scoped lang="scss">
.carousel {
  padding: 20px;
  position: relative;

  .title {
    font-size: 50px;
    font-weight: 800;
    font-family: '楷体';
    color: #304156;
    position: absolute;
    left: 940px;
    top: 57px;
    z-index: 99;
  }
}

.el-carousel__item {
  width: 100%;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.is-selected {
  color: #1989FA;
}

.date-picker {
  display: inline-block;
  width: 30%;
  height: 643px;
  border: 1px dashed #304156;
  padding: 10px;
  margin: -25px 10px 0px 40px;
  float: left;
}

.dy-table {
  border: 1px solid #304156;
  width: 65%;
  height: 643px;
  display: inline-block;
  float: left;
  overflow: hidden;
  margin: -25px 0px 0px 10px;
}
::v-deep .cardHeader {
  width: 100%;
  height: 50px;
  /*color: #2f79ff;*/
  font-family: PingFang SC;
  font-weight: 900;
  color: #2d2d2d;
  font-size: 15px;
  /*margin-top: 5px;*/
  /*background: #1ab394;*/
  margin-left: 10px;
}

.noticeUl li {
  font-size: 30px;
  line-height: 30px;
  height: 30px;
  margin: 10px 0;
  /*background: #1ab394;*/
}

.notice {
  float: left;
  display: inline-block;
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*width: 70%;*/
  /*height: 25px;*/
  /*font-family: Microsoft YaHei;*/

  /*display: inline-block;*/
  /*overflow: hidden;*/

  /*padding-top: 8px;*/
  /*padding-bottom: 8px;*/
}

a:hover {
  color: #409eff;
}
</style>

